<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="所属事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
					</cl-filter-group>
				</el-row>
			</template>
			<el-row>
				<!-- 数据表格 -->
				<cl-table v-bind="table">
					<cl-empty slot="empty" />
					<template #column-cus_service="{ scope: { row } }">
						<span
							v-for="(item, index) in row.customer"
							:key="index"
							:class="{ 'color-danger': contactDisable(item) }"
						>
							{{ item.user_name }}({{ item.contact_type_desc }}:{{ item.contact }})
							<el-button type="text" @click="delCus(item)">移除;</el-button>
						</span>
					</template>
					<template #column-opt="{ scope: { row } }">
						<div class="flex flex-align-start">
							<el-button
								type="primary"
								:disabled="!row.customer.length"
								@click="openLink(row)"
							>
								链接
							</el-button>
						</div>
					</template>
				</cl-table>
			</el-row>

			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<zm-pagination />
				</el-row>
			</template>
		</cl-pagefull>
	</cl-crud>
</template>

<script>
export default {
	name: "city-list",
	inject: ["parent"],
	data() {
		return {
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [
					{ label: "ID", prop: "id", width: 100, fixed: true },
					{
						label: "事业部",
						prop: "biz_name",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "城市",
						prop: "name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "服务客服", prop: "cus_service", align: "left", minWidth: 200 },
					// { label: "广告账户ID", prop: "id_supplier", minWidth: 150 },
					{
						label: "开启推广",
						prop: "enable_ad",
						width: 100,
						formatter: ({ enable_ad }) => (enable_ad == 1 ? "是" : "否")
					},
					{ label: "操作", prop: "opt", width: 80, fixed: "right" }
				]
			},
			search: {
				biz_id: ""
			}
		};
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.ad)
				.set("dict", {
					api: {
						page: "cityPage"
					}
				})
				.done();
			app.refresh(this.search);
		},

		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		changeBiz() {
			this.refresh();
		},
		contactDisable(item) {
			return item.ad_close_date != 1 || item.banci != 0;
		},
		// 移除客服
		async delCus(item) {
			this.confirm()
				.then(async () => {
					let params = {
						...item,
						type: 1
					};
					await this.$service.ad.cusDel(params);
					this.$message.success("操作成功");
					this.refresh();
				})
				.catch(() => {});
		},
		// 链接
		openLink(row) {
			this.parent.openLink(row);
		}
	}
};
</script>
